<template>
    <div>
        <el-dialog title="回访客户" :visible.sync="dialogFormVisible" width="50%" style="text-align: left">
            <table style="font-weight: bold">
                <tr>
                    <td><label for="label_11">姓名:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="name"
                            id="label_11"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_12">年龄:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="age"
                            id="label_12"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_13">家庭住址:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="addr"
                            id="label_13"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_17">爱好:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="hobby"
                            id="label_17"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_14">联系方式:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="phone"
                            id="label_14"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_20">客户来源:</label></td>
                    <td>
                        <el-input
                            type="input"
                            placeholder="请输入内容"
                            v-model="come"
                            id="label_20"
                            style="width: 250px"
                            :disabled="true"
                        >
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_15">下次回访: <span style="color: red">*</span></label></td>
                    <td>
                        <DatePicker size="large" type="date" v-model="next_visit_at" placeholder="选择下次回访时间"
                                    style="width: 250px"></DatePicker>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_15">回访是否有效: <span style="color: red">*</span></label></td>
                    <td>
                        <el-select v-model="is_ok" placeholder="请选择" id="label_15">
                            <el-option
                                v-for="item in visit_options"
                                :key="item.value"
                                :value="item.value"
                                :label="item.label"
                            >
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr v-show="isShow">
                    <td><label>预计到院时间: <span style="color: red">*</span></label></td>
                    <td>
                        <DatePicker size="large" type="datetime" v-model="come_at" placeholder="选择预计到院时间"
                                    style="width: 250px"></DatePicker>
                    </td>
                </tr>
                <tr>
                    <td><label for="label_18">本次交流内容: <span style="color: red">*</span></label></td>
                    <td>

                        <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="exchange_content"
                            id="label_18"
                            style="width: 250px"
                        >
                        </el-input>
                    </td>
                </tr>
            </table>
            <hr>
            <div style="margin-top: 25px; text-align: left">
                <el-table
                    :data="visitRecordData"
                    stripe
                    style="width: 100%"
                    :row-style="{ height: '32px' }"
                    :header-row-style="{ height: '10px' }"
                    :cell-style="{ padding: '1px' }"
                >
                    <el-table-column prop="created_at" label="回访时间" :formatter="handleFormatter" width="160"></el-table-column>
                    <el-table-column prop="is_ok" label="是否有效"  width="100" :formatter="handleFormatter"></el-table-column>
                    <el-table-column prop="content" label="最近 3 次回访记录"  width="450"></el-table-column>
                </el-table>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleCallCustomer">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {dateFormat, getTimeStamp} from "@/utils/time.js";

    export default {
        name: "CallPhone",
        data() {
            return {
                dialogFormVisible: false,
                customerId: 0,
                name: "",
                age: "",
                addr: "",
                phone: "",
                hobby: "",  // 默认员工
                come: "",
                next_visit_at: 0,  // 为时间戳
                come_at: 0,  // 下次到院时间
                exchange_content: "",
                visitRecordData: [],  // 以往回访记录
                is_ok: 1,   // 回访是否有效
                visit_options: [{"value": 1, "label": "是"}, {"value": 0, "label": "否"}],
                isShow: true,  // 是否显示到院时间, 只有在有效客户才显示
            };
        },
        methods: {
            handleCheckIsNull() {
                let errMsg = "";
                this.next_visit_at === '' ? errMsg += '下次回访时间不能为空, ' : '';
                this.exchange_content === '' ? errMsg += '本次交流内容不能为空, ' : '';
                return errMsg;
            },
            // 格式化
            handleFormatter(row, column) {
                if (column.property === 'created_at') {
                    return dateFormat(row.created_at)
                }
                if (column.property === 'is_ok') {
                    return row.is_ok === 0 ? "无效" : "有效";
                }
            },

            handleOpen(rowData) {
                // console.log(rowData)
                this.customerId = rowData.id;
                this.name = rowData.name;
                this.age = rowData.age;
                this.addr = rowData.addr;
                this.phone = rowData.phone;
                this.hobby = rowData.hobby;
                this.come = rowData.come;
                // 默认拜访时间是间隔 3 天
                let dateTime = new Date()
                dateTime = dateTime.setDate(dateTime.getDate() + 3);
                dateTime = new Date(dateTime)
                this.next_visit_at = dateTime;
                this.come_at = "";
                this.exchange_content = "";
                // 获取之前回访记录
                this.handelGetVisitRecord(rowData.id);
                this.dialogFormVisible = true;
            },
            // 回访客户
            handleCallCustomer() {
                let err = this.handleCheckIsNull();
                if (err !== '') {
                    this.$message({'type': 'error', 'message': err});
                    return;
                }
                let nextVisitTime = getTimeStamp(this.next_visit_at);
                let comeAt = getTimeStamp(this.come_at);
                let reqData = {
                    "id": this.customerId,
                    "next_visit_at": nextVisitTime,
                    "exchange_content": this.exchange_content,
                    "user_id": this.COOKIE.get('uid'),
                    "is_ok": this.is_ok,   // 是否有效
                    "come_at": comeAt,  // 预计到院时间
                };
                console.log("reqData: ", reqData)
                this.AXIOS.post("/api/visit/callCustomer", reqData)
                    .then(resp => {
                        // console.log(resp)
                        let statusCode = resp.data.status;
                        if (statusCode === 1) {
                            this.$message({type: "success", message: "保存成功"});
                            this.dialogFormVisible = false;   // 关闭对话框
                            // 调用父组件中的 handleInitCustomerListData, 刷新 list 数据
                            this.$parent.handleInitVisitListData();
                        } else {
                            this.$message({type: "error", message: resp.data.data})
                        }
                    })
                    .catch(err => {
                        this.$message({type: "error", message: err})
                    })
            },
            handelGetVisitRecord(customerId) {
                this.AXIOS.get(`api/visit/getVisitRecord/${customerId}/no`)
                    .then(resp => {
                        console.log(resp.data)
                        let statusCode = resp.data.status;
                        if (statusCode === 1) {
                            this.visitRecordData = resp.data.data;
                        }
                    })
                    .catch(err => {
                        this.$message({type: "error", message: err})
                    })
            }
        },
        watch: {
            "is_ok": function (v) {
                this.isShow = v !== 0;
            }
        }
    };
</script>

<style scoped>
</style>
